<template>
	<view class="lottery">
		<view class="navbar">
			<u-navbar title="积分抽奖" :background="navbarBackground" back-icon-color="#fff" title-color="#fff" :border-bottom="false"></u-navbar>
		</view>

		<view class="topBox">
			<image class="bg" src="/pagesB/static/lotteryBg.png" mode="widthFix"></image>
			<view class="title">
				<text class="text">积分兑换</text>
				<text class="text">抽取大奖</text>
			</view>
			<view class="past" @click="goUrl('/pagesB/index/past')">往期记录</view>
		</view>
		
		<view class="lotteryBox">
			<view class="title">您已兑换<text class="text">{{user_lottery_ticket_num}}</text>张奖券</view>
			<view class="tips">兑换奖券越多，中奖几率越大哦！</view>
			<view class="schedule">
				<view class="number" :style="{ left: percent/2 + '%' }">{{lottery_ticket_num}}张</view>
				<view class="end">瓜分大奖</view>
				<view class="prize" :style="{ left: percent + '%' }">
					<image class="giftBox" src="/pagesB/static/giftBox.png" mode="widthFix"></image>
					<view class="percent">{{percent}}%</view>
				</view>
				<view class="progress">
					<u-line-progress :percent="percent" active-color="#E52600" :show-percent="false" :striped="true" :striped-active="true"></u-line-progress>
				</view>
			</view>
			<view class="btnBox">
				<button type="default" class="btn" @click="exchangeShow = true">兑换奖券</button>
			</view>
			<view class="participants flex_space_a">
				<view class="user flex_conter" @click="exchangeUserShow = true">
					<image class="avatar" src="../../static/myBg.png" mode="aspectFill"></image>
					<image class="avatar" src="../../static/myBg.png" mode="aspectFill"></image>
					<image class="avatar" src="../../static/myBg.png" mode="aspectFill"></image>
					<image class="avatar" src="../../static/myBg.png" mode="aspectFill"></image>
					<image class="avatar" src="../../static/myBg.png" mode="aspectFill"></image>
					<view class="icon flex_conter_c">
						<u-icon name="more-dot-fill" color="#666" size="28"></u-icon>
					</view>
				</view>
				<view class="number"><text class="text">{{lottery_user_num}}</text>人已参加</view>
			</view>
		</view>
		
		<view class="prizeBox">
			<view class="title">
				<view class="text">奖品</view>
				<image class="titleBg" src="/pagesB/static/titleBg.png" mode="widthFix"></image>
			</view>
			<view class="prizeList">
				<view class="item">
					<view class="con flex_conter">
						<view class="label">一等奖</view>
						<view class="conText"><text class="text">2000</text>幸运豆，<text class="text">1</text>名</view>
					</view>
					<image class="prizeBg" src="../static/prize.png" mode="widthFix"></image>
				</view>
				<view class="item">
					<view class="con flex_conter">
						<view class="label">二等奖</view>
						<view class="conText"><text class="text">1000</text>幸运豆，<text class="text">1</text>名</view>
					</view>
					<image class="prizeBg" src="../static/prize.png" mode="widthFix"></image>
				</view>
				<view class="item">
					<view class="con flex_conter">
						<view class="label">三等奖</view>
						<view class="conText"><text class="text">500</text>幸运豆，<text class="text">1</text>名</view>
					</view>
					<image class="prizeBg" src="../static/prize.png" mode="widthFix"></image>
				</view>
				<view class="item">
					<view class="con flex_conter">
						<view class="label">幸运奖</view>
						<view class="conText"><text class="text">10</text>幸运豆，<text class="text">1</text>名</view>
					</view>
					<image class="prizeBg" src="../static/prize.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<view class="description">
			<view class="title">
				<view class="text">活动说明</view>
				<image class="titleBg" src="/pagesB/static/titleBg.png" mode="widthFix"></image>
			</view>
			<view class="descriptionText">
				<view class="item">开奖条件：每期达到1万奖券立即随机抽奖</view>
				<view class="item">活动内容：100积分可兑换1个奖券，每期活动用户可重复兑换奖券，上不封顶。兑换的奖券越多中奖概率越大哦！中奖后获得的幸运豆可以在我的资产里兑换成余额进行提现！</view>
			</view>
		</view>
		
		<u-popup v-model="exchangeUserShow" mode="center" width="600" border-radius="14" :closeable="true">
			<view class="exchangeUserBox">
				<view class="title">用户列表</view>
				<scroll-view scroll-y class="userList">
					<view class="item flex_space_b" v-for="(item, index) in [0, 1, 2, 3, 4, 5]" :key="index">
						<view class="info flex_conter">
							<image class="avatar" src="../static/incomeBg.png" mode="aspectFill"></image>
							<view class="uname">张三</view>
						</view>
						<view class="time">2021-03-01 14:32</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<u-modal v-model="exchangeShow" title="兑换奖券" @confirm="exchangeConfirm" @cancel="exchangeCancel" :show-cancel-button="true">
			<view class="exchangeBox">
				<view class="integral">积分：<text class="text">5000</text></view>
				<view class="exchange flex_conter">
					<input type="number" class="input" v-model="exchangeNumber" placeholder="输入数量" placeholder-style="font-size: 24rpx;"/>
					<view class="textBox">奖券<text class="equal">=</text><text class="number">{{exchangeNumber ? exchangeNumber * 100 : 0}}</text>积分</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	
	export default {
		data() {
			return {
				scrollTop: 0,
				percent: 70.6,
				exchangeUserShow: false,
				exchangeShow: false,
				exchangeNumber: null,
				
				score_lottery: Object,
				lottery_ticket_num:0,
				lottery_user_num:0,
				user_lottery_ticket_num:0,
				user_score:0
			}
		},
		onLoad() {
			if(util.is_wechat_xcx_auth()){
				this.loadData(true);
			}
		},
		methods: {
			loadData: function(is_loading){
				// 加载数据
				var that = this;
				util.requestPost("api.php/ScoreLottery/index", {}, function(res) {
					that.score_lottery = res.data.score_lottery;
					that.lottery_ticket_num = res.data.lottery_ticket_num;
					that.lottery_user_num = res.data.lottery_user_num;
					that.user_lottery_ticket_num = res.data.user_lottery_ticket_num;
					that.user_score = res.data.user_score;
					
				},is_loading);
			},
			exchangeConfirm () {
				console.log('点击了确认');
			},
			exchangeCancel () {
				this.exchangeNumber = null;
			},
			goUrl (url) {
				uni.navigateTo({
					url
				})
			}
		},
		computed:{
			navbarBackground: function () {
				if (this.scrollTop >= 40) {
					return { background: '#fe0000' }
				} else {
					return { background: 'rgba(254, 0, 0, ' + (0.02 * this.scrollTop) + ')' }
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
.lottery {
	padding-bottom: 32rpx;
	
	.navbar {
		position: fixed;
		top: 0;
		z-index: 100;
		width: 750rpx;
	}
	
	.topBox {
		position: relative;
		padding : 140rpx 0 60rpx;
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			width: 750rpx;
		}
		.title {
			position: relative;
			z-index: 5;
			text-align: center;
			font-size: 52rpx;
			font-weight: bold;
			color: #fff;
			.text {
				margin: 0 12rpx;
			}
		}
		.past {
			position: absolute;
			right: 0;
			top: 218rpx;
			color: #FFFFFF;
			padding: 8rpx 24rpx;
			background-color: rgba($color: #fff, $alpha: 0.4);
			border-radius: 40rpx 0 0 40rpx;
		}
	}
	
	.lotteryBox {
		padding: 24rpx 48rpx;
		margin: 32rpx 24rpx 0;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		box-shadow: 0 4rpx 8rpx rgba($color: #000000, $alpha: 0.2);
		position: relative;
		z-index: 10;
		.title {
			font-size: 32rpx;
			text-align: center;
			.text {
				font-size: 42rpx;
				color: var(--primaryColor);
			}
		}
		.tips {
			font-size: 28rpx;
			color: #999999;
			text-align: center;
			margin-top: 8rpx;
		}
		.schedule {
			margin-top: 16rpx;
			padding-top: 52rpx;
			position: relative;
			.number {
				position: absolute;
				top: 0;
				transform: translateX(-50%);
				font-size: 24rpx;
				color: #FFFFFF;
				background-color: var(--primaryColor);
				border-radius: 40rpx;
				padding: 4rpx 12rpx;
				&::after {
					content: '';
					display: block;
					width: 12rpx;
					height: 12rpx;
					background-color: var(--primaryColor);
					transform: rotate(45deg) translateX(-50%);
					position: absolute;
					left: 50%;
					bottom: -8rpx;
				}
			}
			.end {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 24rpx;
				color: #FFFFFF;
				background-color: var(--primaryColor);
				border-radius: 40rpx;
				padding: 4rpx 12rpx;
				&::after {
					content: '';
					display: block;
					width: 12rpx;
					height: 12rpx;
					background-color: var(--primaryColor);
					transform: rotate(45deg) translateX(-50%);
					position: absolute;
					left: 50%;
					bottom: -8rpx;
				}
			}
			.prize {
				position: absolute;
				top: 46rpx;
				transform: translateX(-50%);
				.giftBox {
					width: 40rpx;
					display: block;
					margin: 0 auto;
				}
				.percent {
					text-align: center;
					font-size: 24rpx;
					color: var(--primaryColor);
				}
			}
		}
		.btnBox {
			margin-top: 36rpx;
			.btn {
				border-radius: 50rpx;
				color: #FFFFFF;
				background: var(--btnBgColor);
			}
		}
		.participants {
			margin-top: 28rpx;
			.user {
				margin-right: 32rpx;
				.avatar {
					width: 40rpx;
					height: 40rpx;
					border-radius: 40rpx;
					margin-left: -8rpx;
					&:first-of-type {
						margin-left: 0;
					}
				}
				.icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 40rpx;
					margin-left: -8rpx;
					background-color: #ccc;
				}
			}
			.number {
				font-size: 28rpx;
				.text {
					color: var(--primaryColor);
				}
			}
		}
	}
	
	.prizeBox {
		padding: 0 24rpx 24rpx;
		margin: 24rpx 24rpx 0;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		box-shadow: 0 4rpx 8rpx rgba($color: #000000, $alpha: 0.2);
		position: relative;
		.title {
			position: relative;
			.text {
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 70rpx;
				position: relative;
				z-index: 2;
			}
			.titleBg {
				position: absolute;
				top: 0;
				left: 50%;
				z-index: 0;
				transform: translateX(-50%);
				width: 400rpx;
			}
		}
		.prizeList {
			.item {
				position: relative;
				margin-top: 20rpx;
				height: 102rpx;
				.con {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 4;
					height: 102rpx;
					.label {
						width: 172rpx;
						height: 102rpx;
						color: #FFFFFF;
						font-size: 32rpx;
						text-align: center;
						line-height: 102rpx;
					}
					.conText {
						width: 480rpx;
						height: 102rpx;
						font-size: 24rpx;
						color: #b98350;
						text-align: center;
						line-height: 102rpx;
						.text {
							font-size: 36rpx;
						}
					}
				}
				.prizeBg {
					width: 654rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
			}
		}
	}
	
	.description {
		padding: 0 24rpx 24rpx;
		margin: 24rpx 24rpx 0;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		box-shadow: 0 4rpx 8rpx rgba($color: #000000, $alpha: 0.2);
		position: relative;
		.title {
			position: relative;
			.text {
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 70rpx;
				position: relative;
				z-index: 2;
			}
			.titleBg {
				position: absolute;
				top: 0;
				left: 50%;
				z-index: 0;
				transform: translateX(-50%);
				width: 400rpx;
			}
		}
		.descriptionText {
			margin-top: 20rpx;
			.item {
				margin-top: 12rpx;
			}
		}
	}
}

.exchangeUserBox {
	.title {
		font-size: 32rpx;
		text-align: center;
		line-height: 90rpx;
	}
	.userList {
		max-height: 500rpx;
		.item {
			padding: 20rpx;
			border-bottom: 1rpx solid #EEEEEE;
			&:last-of-type {
				border-bottom: none;
			}
			.info {
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.uname {
					font-size: 28rpx;
					margin-left: 12rpx;
				}
			}
			.time {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}

.exchangeBox {
	padding: 48rpx 24rpx;
	.integral {
		font-size: 32rpx;
		.text {
			color: var(--primaryColor);
		}
	}
	.exchange {
		margin-top: 24rpx;
		.input {
			width: 160rpx;
			padding: 4rpx 12rpx;
			border-bottom: 1rpx solid var(--primaryColor);
		}
		.textBox {
			font-size: 28rpx;
			color: #666666;
			margin-left: 8rpx;
			.equal {
				margin: 0 8rpx;
				color: #333;
			}
			.number {
				font-size: 40rpx;
				color: #333;
			}
		}
	}
}
</style>
